<template>
  <view class="my-address-component">
    <view class="choose-address">
      <view @click="chooseAddress" class="address-info" v-if="JSON.stringify(addressInfo) !== '{}'">
        <view class="top">
          <view class="left">
            收货人：{{ addressInfo.userName }}
          </view>
          <view class="right">
            <text>电话：{{ addressInfo.telNumber }}</text>
            <uni-icons type="right" size="18"></uni-icons>
          </view>
        </view>
        <view class="bottom">
          收货地址：{{ fullAddress }}
        </view>
      </view>
      <button type="primary" size="mini" v-else @click="chooseAddress">请选择收货地址+</button>
    </view>
    <image src="@/static/cart_border@2x.png" class="border"></image>
  </view>
</template>

<script>
  import { mapActions, mapState, mapGetters } from 'vuex'
  export default {
    name:"MyAddress",
    data() {
      return {
        
      };
    },
    computed: {
      ...mapState('user', ['addressInfo']),
      ...mapGetters('user', ['fullAddress'])
    },
    methods: {
      ...mapActions('user', ['updateAddressInfo']),
      async chooseAddress() {
        const result = await uni.chooseAddress()
        if(result[0] === null && result[1].errMsg === 'chooseAddress:ok') {
          this.updateAddressInfo(result[1])
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.my-address-component {
  display: flex;
  flex-direction: column;
  .choose-address {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    background-color: white;
    .address-info {
      flex: 1;
      padding: 0 20rpx;
      font-size: 28rpx;
      .top {
        display: flex;
        justify-content: space-between;
        margin: 20rpx 0;
        .right {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .bottom {
        margin: 20rpx 0;
      }
    }
  }
  .border {
    width: 100%;
    height: 10rpx;
  }
}
</style>